<template>
	<view class="box">
		<!-- 帮友圈 -->
		<view class="tou byq fixed" :style="'padding-top:' + statusBarHeight1 + 'px;height:'+(statusBarHeight1+186)+'rpx;'">
			<!-- 帮友圈
			<image @click="byq" class="index-sousou" src="https://pic.bangbangtongcheng.com/static/bbcz/sell_byq02.png"
				mode="widthFix" /> -->
			<view class="title">帮友圈</view>
			<view class="roundBut" @click="byq(1)">我发布的</view>
			<view class="roundBut" @click="byq(2)">再发一条</view>
		</view>
		<view class="tou" :style="'padding-top:' + statusBarHeight1 + 'px;height:'+(statusBarHeight1+186)+'rpx;'"></view>
		<!-- <scroll-view scroll-y class="scroll-view-wrap" @scrolltolower="down" refresher-background="#f5f5f5"> -->
		<view class="circle">
			<view class="circle_item" v-for="(item, index) in WatchList" :key="item.id" @click="details(item, index)">
				<view class="headPortrait" @click.stop="userfy(item)">
					<image class="img1" v-if="!item.userInfo.image"
						src="https://pic.bangbangtongcheng.com/static/my/header.png" />
					<image class="img1" :src="item.userInfo.image" v-else />
				</view>
				<view class="item_content" style="flex: 1">
					<view class="mingpian">
						<view class="mingpian_left">
							<view class="counselor">
								<view class="counselor_top">
									<view class="name">{{ item.userInfo.nikeName || "未命名用户" }}</view>
								</view>
								<!-- <text class="vip-rank" :style="{
                    color: $member.colors()[item.userInfo.memberLevel - 1].wordColor,
                    backgroundColor: $member.colors()[item.userInfo.memberLevel - 1]
                      .bgColor,
                    borderColor: $member.colors()[item.userInfo.memberLevel - 1]
                      .lineColor,
                  }">
									{{ $member.colors()[item.userInfo.memberLevel - 1].level }}
								</text> -->
							</view>
						</view>
						<view class="mingpian_right">
							<view class="item" @click.stop="guanzhu(item, index)">
								<image class="image1 circleImageIcon" v-if="item.whetherCollection == 0"
									src="https://pic.bangbangtongcheng.com/static/bbcz/byq-daixihuan.png" mode="">
								</image>
								<image v-else-if="item.whetherCollection == 1" class="image1 circleImageIcon"
									src="https://pic.bangbangtongcheng.com/static/bbcz/byq-yixihuan.png" mode="">
								</image>
								<!-- 								<view class="">
									{{ item.whetherCollection == 0 ? "收藏" : "已收藏" }}
								</view> -->

							</view>
							<!-- #ifdef APP-PLUS -->
							<view class="item" @click.stop="fn(item)">
								<image class="image1 circleImageIcon" style="margin-right: 0rpx;"
									src="https://pic.bangbangtongcheng.com/static/bbcz/share-icon.png" mode=""></image>
							</view>
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<view class="item">
								<image class="image1 circleImageIcon" style="margin-right: 0rpx;"
									src="https://pic.bangbangtongcheng.com/static/bbcz/share-icon.png" mode=""></image>
							</view>
							<!-- #endif -->
						</view>
					</view>
					<view class="circle_center_wz">
						<!-- <view class="circle_center_wz_text" style="position: relative;"
							:style="{'-webkit-line-clamp':item.show? 99:5}">
							{{item.content}}
							<view>
								<view class="text-btn" v-show="!item.show" @click.stop="item.show = true">
									...全文
								</view>
								<view class="text-btn" v-show="item.show" @click.stop="item.show = false">
									收起
								</view>
							</view>

						</view> -->
						<mote-lines-divide :dt="item.content" :line="5" expandText="展开" foldHint="收起" expandTextWidth="90rpx" />
						<view class="circle_center_wz_img">
							<!-- 发布为图片 -->
							<template v-if="item.picture">
								<view v-if="item.pictureArr.length == 1">
									<image class="circle_center_wz_imgss" :src="item.pictureArr[0]" mode="heightFix"
										@click.stop="ViewImage(item.pictureArr, item.pictureArr[0])"></image>
								</view>
								<view :class="
                    item.pictureArr.length > 2
                      ? 'circle_center_wz_imgss_d'
                      : 'circle_center_wz_imgss_ds'
                  " v-else>
									<image class="image" v-for="(i, j) in item.pictureArr" :src="i" :key="j" mode="aspectFill"
										@click.stop="ViewImage(item.pictureArr, item.pictureArr[j])">
									</image>
								</view>
							</template>
							<!-- 发布为视频 -->
							<template v-if="item.video">
								<view class="circle_center_wz_img_vid" @click.stop="videoClick(item.video)">
									<image style="max-height: 290rpx" :src="item.video + '?vframe/jpg/offset/0'" mode="heightFix">
									</image>
									<image class="images" src="https://pic.bangbangtongcheng.com/static/bbcz/mdlb-sp01.png" mode="">
									</image><strong></strong>
								</view>
							</template>
						</view>
					</view>
					<view style="
              width: 100%;
              display: flex;
              align-items: start;
              margin-left: 30rpx;
              margin-top: 20rpx;
            " @click.stop="openMap(item)" v-if="item.detailedAddress">
						<image style="width: 28rpx; height: 28rpx"
							src="https://pic.bangbangtongcheng.com/static/bbcz/location-icon.png" mode=""></image>
						<view style="width: 500rpx;font-size: 24rpx;">
							{{ item.detailedAddress.slice(3, item.detailedAddress.length) }}
						</view>
					</view>
					<view class="circle_bottom">
						<view class="circle_left">
							{{ $Time.getDateDiff(item.createDate) }}
						</view>
						<view class="circle_right">
							<view class="circle_right_item">
								<image class="image2" src="https://pic.bangbangtongcheng.com/static/bbcz/byq-liulan.png" mode="">
								</image><span>{{ item.views || 0 }}</span>
							</view>
							<view class="circle_right_item" @click.stop="dianzan(item, index, 1)">
								<image class="image3 circleImageIcon"
									src="https://pic.bangbangtongcheng.com/static/bbcz/byq-weidianzan.png" mode=""
									v-if="item.whetherThumbsUp != 1"></image>
								<image class="image3 circleImageIcon"
									src="https://pic.bangbangtongcheng.com/static/bbcz/byq-dianzan.png" mode="" v-else>
								</image>
								<span>{{ item.upThumb }}</span>
							</view>
							<view class="circle_right_item" @click.stop="diancai(item, index, 2)">
								<image class="image3 circleImageIcon"
									src="https://pic.bangbangtongcheng.com/static/bbcz/byq-weidiancai.png" mode=""
									v-if="item.whetherThumbsDown != 1"></image>
								<image class="image3 circleImageIcon" src="https://pic.bangbangtongcheng.com/static/bbcz/byq-yicai.png"
									mode="" v-else>
								</image>
								<span>{{ item.downThumb }}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="WatchList.length == 0" class="none">
				<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
				<view v-show="!loading">没有更多数据了</view>
				<view v-show="loading">数据加载中，请稍后……</view>
			</view>
			<view class="down" v-show="WatchList.length != 0 && !downStatus">没有更多了</view>
			<view class="" style="height: 60px"></view>
		</view>
		<previewImgV ref="previewImgV"></previewImgV>
		<view-tabbar :selected="1" style="z-index: 999;"></view-tabbar>
		<uniBall ref="uniBall"></uniBall>
		<back-top :scrollTop="scrollTop"></back-top>
	</view>
</template>

<script>
	import Tabbar from "@/components/tabbar.vue";
	import MoteLinesDivide from "@/components/mote-lines-divide/mote-lines-divide";
	import {
		mapGetters
	} from "vuex";
	let statusBarHeight;
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//#endif
	// #ifdef APP-PLUS
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//  #endif
	// #ifdef MP-WEIXIN
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
	//  #endif
	import previewImgV from "@/components/previewImgV.vue";
	export default {
		data() {
			return {
				statusBarHeight,
				list: [{
					num: 1,
					name: "全部",
					valueNum: "",
				}, ],
				userInfo: uni.getStorageSync("Pduser"),
				TabCur: 0,
				scrollLeft: 0,
				id: "",
				loading: false,
				WatchList: [],
				imgUrl: this.$imgSrc,
				waitting: false,
				showType: false,
				orderSort: "1",
				scrollTop: "0",
				trigger: false,
				downStatus: true,
				upStatus: true,
				pageSize: 10,
				pageNo: 1,
				TZid: "",
				TZindex: "",
			};
		},
		components: {
			MoteLinesDivide,
			"view-tabbar": Tabbar,
			previewImgV: previewImgV,
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"]),
		},
		onLoad(options) {
			uni.hideTabBar();
			uni.showLoading({
				title: "加载中",
				mask: false,
			});
			this.getWatch();
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		onShow() {
			if (this.userInfo.id != uni.getStorageSync("Pduser").id) {
				uni.showLoading({
					title: "加载中",
					mask: false,
				});
				this.userInfo = uni.getStorageSync("Pduser");
			}
			// if (this.TZid) {
			// 	this.gainByqData(this.TZid, this.TZindex)
			// }
			// this.WatchList = []
			// this.pageNo = 1;
			// this.getWatch();
			this.$nextTick(() => {
				this.$refs.uniBall.getData();
			});
		},
		async onPullDownRefresh() {
			this.WatchList = [];
			this.pageNo = 1;
			this.downStatus = true;
			if (this.upStatus) {
				this.trigger = true;
				await this.getWatch();
			}
		},
		onReachBottom() {
			this.down();
		},
		onPageScroll(Object) {
			this.scrollTop = Object.scrollTop; //实时获取到滚动的值
		},
		methods: {
			share(item) {
				this.$myRequest
					.post("/api/mobile/vehicleOwner/helpingFriendsCircleforward", {
						circleId: item.id,
						userId: this.userInfo.id,
					})
					.then((res) => {});
			},
			fn(item) {
				uni.showActionSheet({
					itemList: ["分享到微信好友", "分享到微信朋友圈"],
					success: (res) => {
						this.share(item);
						let wsxcene = null;
						if (res.tapIndex == 0) {
							//分享到好友 可以发送小程序
							wsxcene = "WXSceneSession";
							uni.share({
								provider: "weixin",
								scene: wsxcene,
								type: 5,
								title: item.userInfo.nikeName || "未命名用户",
								imageUrl: item.userInfo.image ||
									"https://pic.bangbangtongcheng.com/static/my/header.png",
								miniProgram: {
									id: "gh_c8b17811efca",
									path: "pages_owner/my/friendsCircleDetails?id=" + item.id,
									type: 0,
									webUrl: "https://www.bangbangtongcheng.com/conven_web/#/pages_owner/my/friendsCircleDetails?id=" +
										item.id,
								},
								// summary: "我正在看，" + this.data.title + "赶紧跟我一起来查看！",
								success: function(res) {
									console.log("success:" + JSON.stringify(res));
								},
								fail: function(err) {
									console.log("fail:" + JSON.stringify(err));
								},
							});
						} else {
							uni.downloadFile({
								url: item.userInfo.image ||
									"https://pic.bangbangtongcheng.com/static/my/header.png", //仅为示例，并非真实的资源
								success: (res) => {
									if (res.statusCode === 200) {
										let name = res.tempFilePath.substr(
											res.tempFilePath.lastIndexOf("/") + 1
										); //截取文件名
										plus.zip.compressImage({
												src: res.tempFilePath, //下载完图片的临时路径
												dst: "_doc/photoData/" + name, //存储压缩完图片的临时路径
												overwrite: true, //再次压缩会覆盖掉上次的目录
												width: "150px", //缩放图片的宽度
												height: "100px", //缩放图片的高度
												quality: 5, //压缩图片质量,值越低,图片占内存越低
											},
											(event) => {
												//压缩成功
												wsxcene = "WXSceneTimeline"; //分享到朋友圈 只能H5 或者图片
												uni.share({
													provider: "weixin",
													scene: wsxcene,
													type: 0,
													title: item.userInfo.nikeName ||
														"未命名用户",
													href: "https://www.bangbangtongcheng.com/conven_web/#/pages_owner/my/friendsCircleDetails?id=" +
														item.id,
													imageUrl: event.target,
													summary: "我正在看，" + item.userInfo
														.nikeName ||
														"未命名用户" + "赶紧跟我一起来查看！",
													success: function(res) {
														console.log("success:" +
															JSON.stringify(res)
														);
													},
													fail: function(err) {
														console.log("fail:" + JSON
															.stringify(err));
													},
												});
											},
											(error) => {
												//压缩失败
												uni.showToast({
													title: "压缩失败",
													icon: "none",
												});
											}
										);
									}
								},
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					},
				});
			},
			// 点击会员
			goMyLevel() {
				uni.navigateTo({
					url: "/pages_my/bangClub",
				});
			},
			async userfy(item) {
				if (!this.showLogin()) {
					return;
				}
				let yy = await this.getjjr(item.userInfo.id);
				if (yy.businessType == 1 && yy.shopType == 2 && yy.isShop == 1) {
					if (!yy.buildingId) {
						uni.showToast({
							title: "该商家还未发布楼盘！",
							icon: "none",
							mask: true,
						});
						return;
					}
					uni.navigateTo({
						url: "/pages_houses/houses/housesDetails?id=" + yy.buildingId,
					});
					return;
				}
				if (yy.businessType == 0 && yy.enterpriseRecruitmentStatus == 1) {
					uni.navigateTo({
						url: "/pages_recruitMoney/recruitmentDetails/companyDetails?userId=" + yy.id,
					});
					return;
				}
				uni.navigateTo({
					url: "/pages_owner/dealer/goldConsultant?showTab=9&userId=" + item.userInfo.id,
				});
			},
			async getjjr(id) {
				let that = this;
				let data = {};
				await this.$myRequest
					.get("/api/mobile/public/getPersonalHome", {
						otherId: id,
						ownerId: this.userInfo.id,
					})
					.then((res) => {
						data = res.personalHomeData;
					});
				return data;
			},
			guanzhu(item, index) {
				if (!this.showLogin()) {
					return;
				}
				let that = this;
				this.$myRequest
					.post("/api/mobile/vehicleOwner/collectionOrCancelCollection", {
						collectorId: this.userInfo.id,
						relationId: item.id,
						collectionType: "3",
						ids: item.collectionAttention ? item.collectionAttention.id : "",
					})
					.then((res) => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							mask: true,
						});
						if (item.whetherCollection == 0) {
							this.addIntegral(5, "关注帮友圈");
						}
						this.gainByqData(item.id, index);
					});
			},
			dianzan(item, index, pd) {
				if (!this.showLogin()) {
					return;
				}
				let that = this;
				let data = {};
				if (item.whetherThumbsUp != 1) {
					data = {
						userId: this.userInfo.id,
						circleId: item.id,
						type: pd,
					};
				} else {
					data = {
						userId: this.userInfo.id,
						circleId: item.id,
						id: item.likeRecord ? item.likeRecord.id : "",
						type: pd,
					};
				}
				if (this.waitting) return;
				this.waitting = true;
				this.$myRequest
					.post("/api/mobile/vehicleOwner/upperOrCancelThumb", data)
					.then((res) => {
						this.waitting = false;
						uni.showToast({
							title: res.msg,
							icon: "none",
							mask: true,
						});
						if (item.whetherThumbsUp == 0) {
							this.addIntegral(6, "点赞");
						}
						this.gainByqData(item.id, index);
					});
			},
			diancai(item, index, pd) {
				if (!this.showLogin()) {
					return;
				}
				let that = this;
				let data = {};
				if (item.whetherThumbsDown != 1) {
					data = {
						userId: this.userInfo.id,
						circleId: item.id,
						type: pd,
					};
				} else {
					data = {
						userId: this.userInfo.id,
						circleId: item.id,
						id: item.likeRecord ? item.likeRecord.id : "",
						type: pd,
					};
				}
				this.$myRequest
					.post("/api/mobile/vehicleOwner/downOrCancelThumb", data)
					.then((res) => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							mask: true,
						});
						this.gainByqData(item.id, index);
					});
			},
			// 获取帮友圈详情
			gainByqData(id, index) {
				this.$myRequest
					.get("/api/mobile/vehicleOwner/queryHelpingFriendsCircleDetailsById", {
						id: id,
						userId: this.userInfo.id,
					})
					.then((res) => {
						if (res.msg == "该帮友圈已删除！") {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
							});
							this.WatchList.splice(index, 1);
							return;
						}
						if (res.helpingFriendsCircleDetails.picture) {
							let arr = res.helpingFriendsCircleDetails.picture.split("|");
							let pictureArr = [];
							arr.forEach((el) => {
								pictureArr.push(el);
							});
							res.helpingFriendsCircleDetails.pictureArr = pictureArr;
						}
						this.$set(this.WatchList, index, res.helpingFriendsCircleDetails);
					});
			},
			// 增加帮帮豆
			addIntegral(val, title) {
				this.$myRequest
					.post("/mob/iteration/addIntegral", {
						userId: this.userInfo.id,
						ruleNumber: val,
						title: title,
					})
					.then((res) => {});
			},
			ViewImage(urls, url) {
				uni.previewImage({
					urls: urls,
					current: url,
				});
			},
			videoClick(e) {
				this.$refs.previewImgV.open(e);
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded",
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					},
				});
			},
			byq(num) {
				if (!this.userInfo.phone) {
					uni.showModal({
						content: "尚未登录，前往登录?",
						cancelText: "取消",
						confirmText: "确定",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login?isNeedBack=true",
								});
							}
						},
					});
					return;
				}

				if (num == 1) {
					uni.navigateTo({
						url: "/pages_my/myIssue?type1=3&type2=1"
					});
				} else if (num == 2) {
					uni.navigateTo({
						url: "/pages_owner/release/releaseFriends",
					});
				}
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"],
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari",
					],
				});
			},
			down() {
				if (this.downStatus) {
					this.pageNo++;
					this.getWatch();
				}
			},
			async up() {
				this.WatchList = [];
				this.pageNo = 1;
				this.downStatus = true;
				if (this.upStatus) {
					this.trigger = true;
					await this.getWatch();
				}
			},
			getWatch() {
				this.loading = true;
				this.upStatus = false;
				this.$myRequest
					.get("/api/mobile/vehicleOwner/queryHelpingFriendsCircleList", {
						pageSize: this.pageSize,
						pageNo: this.pageNo,
						publisherId: this.userInfo.id,
					})
					.then((res) => {
						uni.hideLoading();
						if (!res.helpingFriendsCircleList.pageList.length) {
							this.downStatus = false;
						}
						this.upStatus = true;
						this.trigger = false;
						res.helpingFriendsCircleList.pageList.forEach((item) => {
							item.show = false;
							if (item.picture) {
								let arr = item.picture.split("|");
								let pictureArr = [];
								arr.forEach((el) => {
									pictureArr.push(el);
								});
								item.pictureArr = pictureArr;
							}
						});
						this.WatchList = this.WatchList.concat(res.helpingFriendsCircleList.pageList);
						uni.stopPullDownRefresh();
						this.loading = false;
					});
			},
			openMap(item) {
				let that = this;
				/* #ifdef H5 */
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded",
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						uni.hideLoading();
						wxshare.config({
							debug: false, //是否打开调试
							appId: re.data.appId, // 公众号的唯一标识
							timestamp: re.data.timestamp, // 生成签名的时间戳
							nonceStr: re.data.nonce, // ，生成签名的随机串
							signature: re.data.signature, // 签名
							jsApiList: ["openLocation"],
						});
						wxshare.ready(function() {
							wxshare.openLocation({
								latitude: Number(item.latitude), //目的地latitude
								longitude: Number(item.longitude), //目的地longitude
								// name: that.data.title,
								// address: that.data.address,
								scale: 15, //地图缩放大小，可根据情况具体调整
							});
						});
					},
				});
				/* #endif */
				/* #ifndef H5 */
				uni.openLocation({
					latitude: Number(item.latitude),
					longitude: Number(item.longitude),
					name: item.detailedAddress,
					success: function() {
						console.log("success");
					},
				});
				/* #endif */
			},
			details(item, index) {
				uni.navigateTo({
					url: "/pages_owner/my/friendsCircleDetails?id=" + item.id,
				});
				// 记录跳转的参数
				this.TZid = item.id;
				this.TZindex = index;
			},
		},
		mounted() {},
	};
</script>

<style lang="less" scoped>
	.scroll-view-wrap {
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 96rpx - var(--status-bar-height) - 88rpx - 5px - 22px);
		/* #endif */
		/* #ifdef H5 || APP-PULS */
		height: calc(100vh - 96rpx - var(--status-bar-height) - 88rpx - 5px);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - 96rpx - var(--status-bar-height) - 88rpx - 5px);
		/* #endif */
	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 40;
	}

	.box {
		width: 100%;
		/* padding-bottom: 120rpx; */
		background-color: #fff;
		min-height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
	}

	.down {
		height: 60rpx;
		line-height: 60rpx;
		// border-top: 2rpx solid #d0d0d0;
		text-align: center;
	}

	.none {
		text-align: center;

		image {
			width: 430rpx;
			margin-bottom: 16rpx;
		}

		view {
			height: 40rpx;
			line-height: 40rpx;
			color: #666;
		}
	}

	.circleImageIcon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 16rpx;
	}

	.circle {
		margin: 0 30rpx;
		margin-top: 30rpx;

		.circle_item {
			width: 690rpx;
			border-bottom: 1rpx solid #EBEBED;
			margin-bottom: 30rpx;
			display: flex;

			.headPortrait {
				width: 66rpx;
				height: 66rpx;
				position: relative;

				.img1 {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.img2 {
					position: absolute;
					bottom: -14rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 100rpx;
					height: 40rpx;
					background-image: url("https://pic.bangbangtongcheng.com/static/bbcz/jpgw01.png");
					background-size: 100% 120%;
					font-size: 24rpx;
					color: #fff;
					text-align: center;
					line-height: 40rpx;
				}
			}

			.item_content {
				width: calc(100% - 90rpx);
			}

			.mingpian {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.mingpian_left {
					display: flex;

					/* margin-left: 30rpx; */
					.counselor {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin-left: 23rpx;
						height: 66rpx;

						.counselor_top {
							display: flex;
							align-items: center;
							width: 360rpx;

							.name {
								font-size: 32rpx;
								font-weight: 550;
								color: #333333;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.attention {
								display: flex;
								margin-left: 12rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #333333;

								.img4 {
									width: 41rpx;
									height: 41rpx;
									margin-right: 4rpx;
								}
							}
						}

						.counselor_bottom {
							display: flex;
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;

							.img3 {
								width: 31rpx;
								height: 31rpx;
								margin-left: 5rpx;
							}
						}
					}
				}

				.mingpian_right {
					display: flex;
					// flex-direction: column;
					// align-items: center;
					justify-content: space-between;
					flex-wrap: nowrap;

					.item {
						margin: 0rpx 10rpx;

						.image1 {
							width: 28rpx;
							height: 28rpx;
						}
					}
				}
			}

			.circle_center {
				width: 630rpx;
				height: 290rpx;
				border-radius: 18rpx;
				overflow: hidden;
				margin: 0 auto;
				margin-top: 24rpx;
			}

			.circle_center_wz {
				margin-left: 30rpx;
				margin-top: 20rpx;

				.circle_center_wz_text {
					position: relative;
					font-size: 32rpx;
					line-height: 36rpx;
					font-weight: 500;
					color: #333333;
					overflow: hidden;
					word-wrap: break-word;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 5;
					-webkit-box-orient: vertical;
				}

				.circle_center_wz_img {
					margin-top: 20rpx;

					.circle_center_wz_imgss {
						width: 100%;
						max-width: 570rpx;
						height: 290rpx;
						/* border-radius: 18rpx; */
					}

					.circle_center_wz_imgss_d {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						/* justify-content: space-between; */

						.image {
							width: 170rpx;
							height: 170rpx;
							// border-radius: 10rpx;
							margin-bottom: 8rpx;
							margin-right: 8rpx;
						}
					}

					.circle_center_wz_imgss_ds {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.image {
							width: 170rpx;
							height: 170rpx;
							margin-right: 10rpx;
							// border-radius: 10rpx;
							margin-bottom: 10rpx;
						}
					}

					.circle_center_wz_img_vid {
						/* max-width: 630rpx; */
						/* max-height: 290rpx; */
						position: relative;
						display: inline-block;

						image {
							max-width: 550rpx;
						}

						.images {
							width: 74rpx;
							height: 74rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							max-width: 550rpx;
						}
					}
				}
			}

			.circle_bottom {
				margin-top: 30rpx;
				margin-left: 30rpx;
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.circle_left {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
				}

				.circle_right {
					display: flex;
					align-items: center;

					.circle_right_item {
						display: flex;
						align-items: center;
						margin-right: 30rpx;
						height: 37rpx;
						color: #666666;

						.image2 {
							width: 32rpx;
							height: 30rpx;
							margin-right: 4rpx;
						}

						.image3 {
							width: 32rpx;
							height: 30rpx;
							margin-right: 4rpx;
						}

						.image4 {
							width: 34rpx;
							height: 34rpx;
							margin-right: 4rpx;
						}

						span {
							padding: 0rpx 8rpx;
						}
					}

					.circle_right_item:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}

	.byq {
		// box-shadow: 0px 0px 6px 6px rgba(67, 67, 67, 0.1);
		// border-bottom-left-radius: 30rpx;
		// border-bottom-right-radius: 30rpx;
		background-image: url('https://pic.bangbangtongcheng.com/static/bangyouquan-top-bg.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;

	}

	.tou {
		height: 186rpx;
		width: 100%;
		line-height: 88rpx;
		display: flex;

		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: black;
			margin-left: 20rpx;
			margin-right: 50rpx;
		}

		.roundBut {
			font-size: 24rpx;
			color: #0FA291;
			border-radius: 22rpx;
			border: 1rpx solid #0FA291;
			width: 130rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			margin-right: 30rpx;
			margin-top: 24rpx;
		}

		.index-sousou {
			/* bottom: 16rpx !important; */
			position: absolute;
			width: 38rpx;
			height: 32rpx;
			/* bottom: 16rpx !important; */
			/* // top: 50%; */
			/* #ifdef MP  */
			/* // top: 120rpx; */

			/* #endif */
			/* #ifdef H5 || APP */
			/* // top: 20%; */

			right: 30rpx;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			/* // top: 48%; */
			transform: translateX(-50%);
			left: calc(50% + 120rpx);
			// right:200rpx;
			/* #endif */
		}
	}

	.vip-rank {
		width: 120rpx;
		padding: 3rpx 10rpx;
		margin: 0 18rpx 0 0;
		background: #f6f0ff;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		opacity: 1;
		border: 2rpx solid #bd90d9;
		font-size: 24rpx;
		font-weight: 500;
		color: #bd90d9;
		text-align: center;
	}

	.text-btn {
		/* width: 3.2rem; */
		position: absolute;
		right: 2rpx;
		bottom: 0;
		font-size: 30rpx;
		color: #64b6a8;
		background-color: #fff;
	}
</style>